import React, { Component } from 'react'

export default class MySelf extends Component {
  constructor(props) {
    super(props)

    this.state = {
      input1: "",
      input2: "",
    }
  }
  triggerChange(changedValue) {
    if (this.props.onChange) {
      this.props.onChange({
        ...this.state,
        ...this.props.value,
        ...changedValue,
      });
    }
  }
  // componentDidMount() {
  //   if (typeof this.props.value == "undefined") {
  //     if (this.props.onChange) {
  //       this.props.onChange({
  //         ...this.state,
  //       });
  //     }
  //   }
  // }
  render() {

    // const [input1, input2] = this.props.value;
    // console.log(input1,input2)
    const input1 = this.props.value ? this.props.value.input1 : this.state.input1;
    const input2 = this.props.value ? this.props.value.input2 : this.state.input2;
    return (
      <div>
        input1:<input value={input1} onChange={(e) => {
          this.setState({ input1: e.target.value })
          this.triggerChange({ input1: e.target.value })
          // this.props.onChange([e.target.value, this.state.input2])
        }} />&nbsp;
        input2:<input value={input2} onChange={(e) => {
          this.setState({ input2: e.target.value })
          this.triggerChange({ input2: e.target.value })
          // this.props.onChange([this.state.input1, e.target.value])
        }} />
      </div>
    )
  }
}
